<template>
  <!-- 待付款 -->
  <div class="body">
     
    <daifk :yeshu="daifukuan"></daifk>
  </div>
</template>

<script>
import API from "../../http/API";
import daifk from "../orderform/zhujian.vue";

export default {
  name: "daifukn",
  components: {
    daifk,
  },

  data() {
    return {
      daifukuan: 1,
    };
  },
    activated() {
    this.guanb();
  },
  methods: {
    lazyLoading() {
      this.$route.meta.Yaxis = window.pageYOffset;

      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let clientHeight = document.documentElement.clientHeight;
      let scrollHeight = document.documentElement.scrollHeight;
      if (scrollTop + clientHeight >= scrollHeight) {
        console.log("滚动到底部，触发");

        this.mai();
      }
    },
    mai() {
      setTimeout(() => {
        console.log("发起网络请求");
        this.daifukuan++;
        console.log(this.complete);
      }, 500);
    },
    guanb() {
      window.addEventListener("scroll", this.lazyLoading);
    },
  },
  deactivated() {
    window.removeEventListener("scroll", this.lazyLoading);
  },
 
};
</script>

<style lang="less" scoped>
.body {
  // height: 100vh;

  height: 100%;

  background-color: @background;
}
.shangp {
  // width: 100%;
  // height: 100px;
  margin-left: 5px;
  margin-right: 5px;
  // margin-top: 10px;
  // border: 1px solid #000;
  display: flex;
  align-items: center;
  flex-direction: column;

  .conten {
    // height: 100px;
    margin-top: 10px;
    width: 100%;
    display: flex;
    // align-items: center;
    flex-direction: column;
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
    .neirbuf {
      margin-top: 5px;
      margin-right: 5px;
      margin-left: 5px;
      display: flex;
      // width: 100%;
      .texts {
        margin-left: 5px;
        flex: 1;
        width: 100%;
      }
      .img {
        width: 70px;
        border-radius: 5px;
        overflow: hidden;
        height: 70px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.title {
  margin-top: 5px;
  font-size: 17px;
  color: rgb(39, 39, 39);
  margin-bottom: 5px;
}
.guige {
  margin-bottom: 5px;
  color: rgb(138, 138, 138);
}
.zhuantai {
  color: rgb(247, 112, 112);
}
.mans {
  display: flex;
  flex-direction: row-reverse;
  .gonneng {
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    display: flex;
    flex-direction: column;
    .fukuan {
      //  margin-right: 20px;
      height: 20px;
      width: 50px;
      border-radius: 5px;
      text-align: center;
      line-height: 20px;

      border: 1px solid rgb(219, 117, 117);
      margin-bottom: 5px;
    }
  }
}

.jiangge {
  li {
    display: flex;
    flex-direction: row-reverse;
  }
  .zhojian {
    margin-top: 5px;
  }
  .shuliang {
    display: flex;
    margin-top: 5px;
    color: rgb(167, 167, 167);
    flex-direction: row-reverse;
  }
  .danjia {
    margin-top: 5px;
    span {
      font-size: 16px;
    }
  }
}
</style>